<template>
    <div class="content">
        <a-card class="card">
            <div class="header">
                <div class="button">
                    <a-space>
                        <a-popconfirm title="确定要冻结该商户吗?"
                                      ok-text="Yes"
                                      cancel-text="No"
                                      @confirm="confirm"
                                      @cancel="cancel">
                            <a-button type="primary" danger>冻结</a-button>
                        </a-popconfirm>
                        <a-popconfirm title="确定要解冻该商户吗?"
                                      ok-text="Yes"
                                      cancel-text="No"
                                      @confirm="confirmOver"
                                      @cancel="cancelOver">
                            <a-button type="primary">解冻</a-button>
                        </a-popconfirm>

                    </a-space>

                </div>
<!--                <div class="searchForm">-->
<!--                    <a-form :model="searchForm">-->
<!--                        <a-form-item label="">-->
<!--                            <a-input-search-->
<!--                                v-model:value="searchForm.name"-->
<!--                                placeholder="请输入名称"-->
<!--                                enter-button="搜索"-->
<!--                                size="large"-->
<!--                                @search="onSearch"-->
<!--                            />-->
<!--                        </a-form-item>-->
<!--                    </a-form>-->
<!--                </div>-->
            </div>
            <div class="tableBox">
                <a-table :loading="loading"
                         :dataSource="tableData"
                         :row-selection="rowSelection"
                         :rowKey="(record , index) => {return record.id}"
                         :pagination="pagination"
                         :indentSize="2000"
                         :columns="columns">
                    <template #status="{ text}">
                        <template v-if="text == 1">
                            <a-tag color="#108ee9">正常</a-tag>
                        </template>
                        <template v-else>
                            <a-tag color="red">冻结</a-tag>
                        </template>
                    </template>
                    <template #sex="{ text}">
                        <span style="color: #4EB1F7" v-if="text == 0">男</span>
                        <span v-else style="color: #0FBA8E">否</span>
                    </template>
<!--                    <template #action>-->
<!--                        <a-popconfirm title="确定要冻结该商户吗?"-->
<!--                                      ok-text="Yes"-->
<!--                                      cancel-text="No"-->
<!--                                      @confirm="confirm"-->
<!--                                      @cancel="cancel">-->
<!--                            <a-button type="link">冻结</a-button>-->
<!--                        </a-popconfirm>-->
<!--                    </template>-->
                </a-table>
            </div>
        </a-card>
    </div>
</template>

<script>
import {defineComponent, ref, reactive, toRefs, onMounted} from "vue";
import {freezeUser, getUserInfo, unFreezeUser} from "../../../api";
import {message} from "ant-design-vue";
export default defineComponent({
    name: "index",
    setup() {
        const tableDataObj = reactive({
            loading: false,
            tableData: [
                {}
            ],
            // tableEditKey: [{ title: "customTitle" }, { title: "action" }, {title: 'button'}],
            pagination: {
                currentPage: 1,
                limit: 10,
                total: 0,
                showSizeChanger: true,
                showTotal: (total) => {
                    return `共 ${total} 条`
                }
            },
            scroll: { x: 1000, y: 300 },
            columns: [
                {
                    title: "序号",
                    // width: 50,
                    align: 'center',
                    customRender: (text) => `${text.index + 1}`
                },
                {
                    title: "头像",
                    dataIndex: "headPic",
                    key: "headPic",
                    align: 'center',
                    // width: 120,
                    ellipsis: true
                },
                {
                    title: "用户名",
                    dataIndex: "username",
                    align: 'username',
                    // width: 160,
                    key: "url",
                    ellipsis: true
                },
                {
                    title: "状态",
                    dataIndex: "status",
                    key: "status",
                    align: 'center',
                    // width: 150,
                    ellipsis: true,
                    slots: {
                        customRender: "status"
                    }
                },
                {
                    title: "性别",
                    dataIndex: "sex",
                    key: "sex",
                    align: 'center',
                    slots: {
                        customRender: "sex"
                    },
                    ellipsis: true
                },
                {
                    title: "手机",
                    dataIndex: "mobile",
                    key: "mobile",
                    align: 'center',
                    width: 150,
                    ellipsis: true
                },
                {
                    title: "邮箱",
                    dataIndex: "email",
                    key: "email",
                    align: 'center',
                    width: 180,
                    ellipsis: true
                },
                {
                    title: "添加时间",
                    dataIndex: "createTime",
                    align: 'center',
                    key: "createTime",
                    width: 200,
                    ellipsis: true
                },
                // {
                //     title: "操作",
                //     key: "action",
                //     align: 'center',
                //     width: 150,
                //     slots: {
                //         customRender: "action"
                //     }
                // }
            ]
        })
        const searchForm = reactive({
            name: ''
        })
        const state = reactive({
            // limit
        })
        // table 行选择
        const rowSelection = reactive({
            selectedRowKeys: [],
            onChange: (selectedRowKeys, selectedRows) => {
                rowSelection.selectedRowKeys = selectedRowKeys
                console.log(rowSelection.selectedRowKeys)
            }
        })

        // 获取商家人员列表
        const getList = () => {
            const params = {
                currentPage: tableDataObj.pagination.currentPage,
                limit: tableDataObj.pagination.limit
            }
            getUserInfo(params).then((res)=> {
                console.log('商家列表为', res.data)
                if (res.data.code == 200) {
                    tableDataObj.tableData = res.data.data.list
                    tableDataObj.pagination.total = res.data.data.totalCount
                }
            })
        }
        // 取消冻结
        const cancel = () => {
            message.error('取消冻结')
        }

        const confirm = () => {
            if (rowSelection.selectedRowKeys.length === 0) {
                message.warning('请先选择数据')
                return
            }
            // 调用接口
            freezeUser(rowSelection.selectedRowKeys).then((res)=> {
                if (res.data.code == 200) {
                    message.success('冻结成功')
                    rowSelection.selectedRowKeys = []
                    // 刷新列表
                    getList()
                }
            })

        }
        const cancelOver = () => {
            message.error('取消解冻')
        }
        const confirmOver = () => {
            if (rowSelection.selectedRowKeys.length === 0) {
                message.warning('请先选择数据')
                return
            }
            // 调用接口
            unFreezeUser(rowSelection.selectedRowKeys).then((res)=> {
                if (res.data.code == 200) {
                    message.success('解冻成功')
                    rowSelection.selectedRowKeys = []
                    // 刷新列表
                    getList()
                }
            })

        }
        onMounted(() => {
            getList()
        })
        return{
            ...toRefs(tableDataObj),
            searchForm,
            rowSelection,
            confirm,
            cancel,
            cancelOver,
            confirmOver
        }
    }
})
</script>

<style lang="less" scoped>
.content{
    width: 100%;
    height: 100%;

    .card {
        height: 100%;
        //background: #364d79;
        margin: 10px;

        .header{
            display: flex;
            justify-content: space-between;
            align-items: center;

            .button {
                display: flex;
                justify-content: flex-start;
                margin-bottom: 15px;
            }
        }
    }
}
</style>